import 'package:flutter/material.dart';
import 'package:teststudy/FirstPage.dart';
import 'package:teststudy/FourtPage.dart';
import 'package:teststudy/SecondPage.dart';
import 'package:teststudy/ThridPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HomePage();
  }
}


class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

    // 定义底部tabbar列表,并设置每一项的属性（title和icon）
  final List<BottomNavigationBarItem> _item = [
        BottomNavigationBarItem(
          title: Text('主页'),
          icon: Icon(Icons.home)
        ),
        BottomNavigationBarItem(
          title: Text('排行'),
          icon: Icon(Icons.face)
        ),
        BottomNavigationBarItem(
          title: Text('动态'),
          icon: Icon(Icons.star)
        ),
        BottomNavigationBarItem(
          title: Text('我的'),
          icon: Icon(Icons.people)
        ),
  ];
  //  页面跳转列表
  final List<Widget> _pages = [
    FirthPage(),
    SecondPage(),
    ThridPage(),
    FourthPage(),
  ];
    //  当前选择页面 默认是0
  int _selectIndex = 0;  
  
  //  传入一个页面的index,返回该页面
  // Widget _builderPage(int index){
  //   return _pages[index];
  // }
  
  @override
  void initState() { 
    super.initState();  
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        // appBar: AppBar(
        //   title:Text("为己无止境"),
        //   // bottom: ,
        // ),
        body:IndexedStack(
          index: _selectIndex,
          children:_pages,
        ),
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,  //  当底部tabbar超过4个以后，需要设置type为该值，即可正常显示
          currentIndex: _selectIndex,   //  currentIndex的值设置为已选页面的index，底部的tabbar的图标才会发生变化
           selectedItemColor:Colors.pinkAccent, //  选中时的颜色
          items: _item,
          onTap: (index){   //  当点击某一个tabbar，返回值会返回Index，将该index传给页面列表，从而更换当前页面是第几页
            setState((){
              _selectIndex  = index;
            });
          },
          ),
      ),
    );
  }
}